﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="config.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery.lazyload.min.js"></script>
    <style>
        #myDiv {
            height: 800px;
        }

        #myDiv .img {
            display: inline-block;
            width: 100px;
            margin: 2px;
            padding: 0 0 5px 0px;
        }

        #myDiv .img img {
            cursor: pointer;
        }

        #myDiv .img div {
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-left: 5px;
        }

        #myDiv .img.gtfive {
            background-color: rgba(0, 0, 255, 0.4);
        }

        #control {
            padding: 40px 0;
            text-align: center;
        }

        #control input[type="button"] {
            margin: 0 30px;
        }
    </style>
    <script>

        $(function () {
            var serverIP = caijingdaxueip;            //要访问的Ip
            var page = 0;                             //页码
            var pagesize = 72;                        //每页条数
            $.get(serverIP + "/allCapture?page=" + page + "&pagesize=" + pagesize, function (data) {
                loadJSON(JSON.parse(data));
            })
            //人像详情点击事件
            $("body").on("click", ".caijingrenxiang", function () {
                window.open("caijingacvs.html?id=" + $(this).data(""))
            })
            //上一页点击事件
            $("#control .pre").click(function () {
                if (page == -1) {
                    return alert("已是第一页");
                }
                page--;
                $.get(serverIP + "/allCapture?page=" + page + "&pagesize=" + pagesize, function (data) {
                    $("#myDiv").empty();
                    var arcs = JSON.parse(data);
                    loadJSON(arcs)
                })
            })
            //下一页点击事件
            $("#control .next").click(function () {
                page++
                $.get(serverIP + "/allCapture?page=" + page + "&pagesize=" + pagesize, function (data) {
                        console.log(data);
                        if (data == '[]') {
                            alert("最后一页")
                            page--
                        } else {
                            $("#myDiv").empty();
                            var arcs = JSON.parse(data);
                            loadJSON(arcs)
                        }
                    }
                )
            })

            //生成结果
            function loadJSON(arcs) {
                for (var i = 0; i < arcs.length; i++) {
                    console.log(arcs)
                    if (arcs[i].detectFacev2 != null) {

                        if (arcs[i]["detectFacev2"] == 1) {
                            var detectFacev2 = '<div style="background:green;">遮挡:' + arcs[i]["detectFacev2"] + '</div>';
                        } else {
                            var detectFacev2 = '<div style="background:#888\t;">遮挡:' + arcs[i]["detectFacev2"] + '</div>';
                        }
                    } else {
                        var detectFacev2 = '<br>';
                    }

                    if (arcs[i]["x"] != null && Math.abs(arcs[i].x) <= 40 && Math.abs(arcs[i]["y"]) <= 40 && Math.abs(arcs[i]["z"]) <= 40) {
                        var x = '<div style="background:green;">x:' + Number(arcs[i]["x"]).toFixed(2) + '</div>';
                        var y = '<div style="background:green;">y:' + Number(arcs[i]["y"]).toFixed(2) + '</div>';
                        var z = '<div style="background:green;">z:' + Number(arcs[i]["z"]).toFixed(2) + '</div>';
                    } else {
                        var x = (arcs[i]["x"] != null) ? '<div>x:' + Number(arcs[i]["x"]).toFixed(2) + '</div>' : '<br>';
                        var y = (arcs[i]["y"] != null) ? '<div>y:' + Number(arcs[i]["y"]).toFixed(2) + '</div>' : '<br>';
                        var z = (arcs[i]["z"] != null) ? '<div>z:' + Number(arcs[i]["z"]).toFixed(2) + '</div>' : '<br>';
                    }

                    var detectFace = (arcs[i]["detectFace"] != null) ? '<div title="' + arcs[i]["detectFace"] + '">角度:' + arcs[i]["detectFace"] + '</div>' : '<br>';

                    if (arcs[i]["detectCount"] != null && arcs[i]["detectCount"] > 1) {
                        var faceCount = (arcs[i]["detectCount"] != null) ? '<div style="background:red;">数量:' + arcs[i]["detectCount"] + '</div>' : '<br>';
                    } else {
                        var faceCount = (arcs[i]["detectCount"] != null) ? '<div style="background:green;">数量:' + arcs[i]["detectCount"] + '</div>' : '<br>';
                    }

                    var faceid = (arcs[i]["face_image_id"] != null) ? '<div>' + arcs[i]["face_image_id"] + '</div>' : '<br>';


                    var $html = $(" <div class='img'>\
                    <img class = 'caijingrenxiang' height='100' width='100' data-id = '" + arcs[i]["face_image_id"] + "' data-original='" + arcs[i]["face_image_uri"] + "'> \
                    " + faceid + "\
                    " + faceCount + "\
                    " + detectFacev2 + "\
                    " + detectFace + "\
                    " + x + "\
                    " + y + "\
                    " + z + "\
                    </div>"
                    )

                    $("#myDiv").append($html)
                }
                $("img").lazyload();
            }
        })
    </script>
</head>

<body>
<div id="myDiv"></div>
<div id="control">
    <input type="button" class="pre" value="上一页">
    <input type="button" class="next" value="下一页">
</div>
</body>

</html>